// pages/exp/double/vote.js
var utils = require('../../../utils/util.js')

Page({

    /**
     * 页面的初始数据
     */
    data: {
        chosen:false,
        hideLoading: false,
        curStep: -1,
        btnText: '提交',
        images: [
            // { id: '1:1', loaded: false, mask: false, url: 'https://cdn.water-crystal.org/double-blind-test/1.jpg' },
            // { id: '2:3', loaded: false, mask: false, url: 'https://cdn.water-crystal.org/double-blind-test/2.jpg' }
        ],
    },

    attendId: -1,
    selectedImgId: -1,
    canSubmit: false,
    finish: false,

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.showNavigationBarLoading()
        this.loadNextImg();
    },

    loadNextImg: function () {
        const that = this;
        utils.httpRequest({
            url: '/SelectionExp/nextImg?r=' + Math.random(),
            success: function (res) {
                that.attendId = res.data.attendId

                var imgs = res.data.images
                for (var i in imgs) {
                    imgs[i].mask = false
                    imgs[i].loaded = false
                }
                that.setData({images: imgs})

                if (parseInt(res.data.step) >= res.data.totalStep) {
                    that.setData({
                        btnText: '完成实验'
                    })
                    that.finish = true;
                }

                wx.setNavigationBarTitle({
                    title: res.data.step + '/' + res.data.totalStep + ' 对比评分'
                })

            },
            fail: function () {
                console.log('get data failed')
                wx.showModal({
                    title: '网络错误',
                    content: '无法连接到服务器，请检查您的网络连接或稍后重试',
                    showCancel: false,
                    complete: function () {
                        wx.navigateBack({
                            delta: 1
                        })
                    }
                })
            }
        })
    },

    commitAndNext: function () {
        if (this.selectedImgId == -1) {
            wx.showModal({
                title: '请选择照片！',
                content: '点击图片选择您认为更美观的，然后才能提交。您必须提交当前的选择后才能查看下一组图片',
                showCancel: false
            })
        } else if (this.canSubmit) {
            const that = this;
            this.submit2server(function () {
                if (that.finish) {
                    wx.redirectTo({
                        url: 'finish?attendID=' + that.attendId,
                    })
                } else {
                    wx.redirectTo({
                        url: 'vote',
                    })
                }
            });
        } else {
            wx.showModal({
                title: '操作失败',
                content: '请等待图片加载完毕或返回后重新进入实验',
                showCancel: false
            })
        }
    },

    submit2server: function (callback) {
        wx.showLoading({
            title: '正在发送评分',
            mask: true
        })
        const that = this;
        utils.httpRequest({
            url: '/SelectionExp/commitScore',
            method: 'POST',
            data: {
                'attendID': that.attendId,
                'result': that.selectedImgId
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            complete: function () {
                wx.hideLoading()
                wx.showToast({
                    title: '已完成',
                    icon: 'success',
                    duration: 1000
                });
                if (callback) callback();
            }
        })
    },

    loadedImgCount:0,
    imgLoaded: function (res) {
        var imgs = this.data.images
        for(var i in imgs){
            if(imgs[i].id==res.target.id){
                imgs[i].loaded = true
                this.setData({images:imgs})
                break;
            }
        }
        this.loadedImgCount++
        if(this.loadedImgCount==this.data.images.length){
            this.canSubmit = true
            wx.hideNavigationBarLoading()
        }
    },

    tapImage: function (res) {
        this.selectedImgId = res.target.id
        var imgs = this.data.images
        for (var i in imgs) {
            if (imgs[i].id == res.target.id) {
                imgs[i].mask = false
            }else{
                imgs[i].mask = true
            }
        }
        this.setData({ chosen:true, images: imgs })
    },

    cancelChosen:function(){
        this.selectedImgId = -1

        var imgs = this.data.images
        for (var i in imgs) {
            imgs[i].mask = false
        }
        this.setData({ chosen: false, images: imgs })
    },

    help:function(){
        wx.showModal({
            title: '操作说明',
            content: '对不同水样的30组水结晶照片进行盲评。照片经随机混淆，您不知道照片对应的水样是否经过意念处理。您可以随时关闭页面，参与结果将为您保存，可返回继续实验。',//实验结束后您可以查看实验结果。
            showCancel: false
        })
    },

    onPullDownRefresh: function () { wx.stopPullDownRefresh() },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        return { title: "意念影响水：三盲实验", path: '/pages/exp/exp', imageUrl: '/images/swan_lake.jpg' }
    }
})